.top-feature {
  width: 100%;
  height: auto;
  margin-top: 55px;
  animation: main 0.6s;

  & .fes-title {
    color: var(--color);
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 5px;
    margin-bottom: 30px;
    border-bottom: var(--home-divider-border);
    transition: border 1s;
  }

  & .top-feature-inner {
    display: flex;

    & .top-feature-item {
      display: inline-block;
      height: 160px;
      width: 100%;
      margin: 0px 2px;
      
      & .feature-container {
        position: relative;
        height: 100%;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        border-radius: 10px;
        transition: all 0.35s ease-in-out;

        & img {
          height: 100%;
          width: 100%;
          display: block;
          object-fit: cover;
          transition: all 0.35s ease-in-out;
          transform: scale(1);
        }

        & .info {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          text-align: center;
          backface-visibility: hidden;
          background: rgba(0, 0, 0, 0.6);
          visibility: hidden;
          opacity: 0;
          transition: all 0.35s ease-in-out;

          & h3 {
            text-transform: uppercase;
            color: #fff;
            font-size: 17px;
            padding: 10px;
            background: #000000;
            margin: 30px 0 0;
            text-align: center;
            transition: all 0.35s ease-in-out;
            transform: translateX(-100%);
          }

          & p {
            font-style: italic;
            font-size: 12px;
            position: relative;
            color: #b0b0b0;
            padding: 20px;
            text-align: center;
            transition: all 0.35s 0.1s linear;
            transform: translateX(100%);
          }
        }

        & a {
          &:hover {
            & .img {
              transform: scale(1.2);
            }

            & .info {
              visibility: visible;
              opacity: 1;

              & h3 {
                transform: translateX(0);
              }

              & p {
                transform: translateX(0);
              }
            }
          }
        }

        &,
        & * {
          box-sizing: border-box;
        }

        & a {
          color: #333;

          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }

  @mixin screens-md {
    display: none;
  }
}
